<template>
  <div class="needs-box">
    <div class="search3">
      <el-input
        v-model="searchValue"
        maxlength="100"
        clearable
        style="width: 290px"
      />
      <img
        src="../assets/img/search.png"
        class="search-icon"
        @click="handleSearch"
      />
      <span>&nbsp;热门搜索：</span>
      <a
        v-for="topic in topics"
        :key="topic"
        class="tag-item"
        @click="handleTopicDetail(topic)"
        >{{ topic }}</a
      >
    </div>
    <div class="purchase-content">
      <div
        v-for="(item, index) in cneeds"
        :key="index"
        class="purchase-item"
        @click="detailsClick(item.orderId)"
      >
        <div class="title">
          <span class="tips">{{ item.type === "needs" ? "[求购]" : "" }}</span>
          <span class="title-content">{{ item.content }}</span>
        </div>
        <div class="content">{{ item.title }}</div>
        <div class="update-time">{{ formatTimer(item.updateTime) }}</div>
      </div>
    </div>
  </div>
</template>
 <script>
import { ref } from "vue";
import { useRouter } from "vue-router";


export default {
  props: {
    cneeds: {
      type: Array,
    },
  },
  setup(props, { emit }) {
    const searchValue = ref("");
    const router = useRouter();
    const topics = [
      "苹果",
      "新疆哈密瓜",
      "樱桃",
      "西红柿",
      "水稻",
      "玉米",
      "赣南脐橙",
    ];
    const handleSearch = () => {
      emit("handleSearch", searchValue.value);
    };
    const handleTopicDetail = (val) => {
      searchValue.value = val;
      handleSearch();
    };
    const detailsClick = (orderId) => {
      emit("detailsClick", orderId);
      router.push(`/home/purchaseDetails?orderId=${orderId}`).catch((err) => err);
    };
    const formatTimer = (value) => {
      const date = new Date(value);
      const y = date.getFullYear();
      const MM = (date.getMonth() + 1).toString().padStart(2, "0");
      const d = date.getDate().toString().padStart(2, "0");
      return `${y}-${MM}-${d}`;
    };
    return {
      searchValue,
      handleSearch,
      handleTopicDetail,
      detailsClick,
      formatTimer,
      topics,
      router
    };
  },
};
</script>
 <style lang='less' scoped>
.needs-box {
  width: 100%;
  .search3 {
    height: 60px;
    background-color: white;
    padding: 10px 20px;
    margin: 10px auto;
    width: 1300px;
    display: flex;
    align-items: center;
    .tag-item {
      margin-right: 10px;
      cursor: pointer;
    }
    .search-icon {
      height: 40px;
      cursor: pointer;
    }
  }
  .purchase-content {
    background: #fff;
    padding: 20px;
    width: 1300px;
    margin: 0 auto;
    .purchase-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      .title {
        width: 620px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        .tips {
          color: #999;
        }
        .title-content {
          cursor: pointer;
          &:hover {
            color: #035d1c;
            text-decoration: underline;
          }
        }
      }
      .content {
        width: 300px;
        margin-left: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .update-time {
        width: 100px;
        text-align: right;
      }
    }
  }
}
.search3 /deep/ .el-input--suffix .el-input__inner {
  height: 40px;
  line-height: 35px;
}
</style>